<!--账户管理---登录信息-->
<template>
  <div style="display: flex;">
    <div style="width: 50%">
      <detail-list title="" :col="1" class="detail-layout">
        <detail-list-item term="登录手机号：">
          <span>{{ formData.phone }}</span>
          <a-button type="link" @click="updateDataEvent(1)">修改</a-button>
        </detail-list-item>
        <detail-list-item term="登录密码：">
          <span>{{ formData.LoginPassword }}</span>
          <a-button type="link" @click="updateDataEvent(2)">修改</a-button>
        </detail-list-item>
<!--        <detail-list-item term="头像设置：">-->
<!--          <a-avatar :size="100" :icon="formData.icon" :src="formData.url" />-->
<!--          <a-button type="link" @click="updateDataEvent(3)">修改</a-button>-->
<!--        </detail-list-item>-->
        <detail-list-item term="支付密码：">
          <span>{{ formData.PaymentPassword }}</span>
          <a-button type="link" @click="updateDataEvent(4)">修改</a-button>
        </detail-list-item>
      </detail-list>
    </div>

    <a-modal v-model="visible" title="修改支付密码" :footer="null" :destroyOnClose="true">
      <a-form :form="form" style="width: 500px;">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="新支付密码">
          <a-input-password allow-clear placeholder="请输入支付密码" v-decorator="[ 'passwd', validatorRulesSet.passwd]" :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="确认新支付密码">
          <a-input-password allow-clear @blur="handleConfirmBlur" placeholder="请确认新密码" v-decorator="[ 'passwdOk', validatorRulesSet.passwdOk]" :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="手机验证码">
          <a-input type="text" placeholder="请输入手机验证码" v-decorator="[ 'captcha', validatorRulesSet.captcha]"  autocomplete="off" />
          <a-button type="primary" @click="send" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
          <a-button type="primary" @click="addCategory">确 认</a-button>
        </a-form-item>

<!--        <a-form-item>-->
<!--          <p class="tips" v-if="isShow">您已完成支付密码的设置，如忘记密码，可在此页面进行修改</p>-->
<!--        </a-form-item>-->
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { getSendSmsCaptcha,getSetPaypwd } from '@api/account'
import { LoginUserInfo } from "@/api/setting";
import { numberFilter } from '@/utils/util'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: "messageInfo",
  components:{
    DetailList,
    DetailListItem
  },
  data(){
    return{
      formData: {
        phone: '',
        LoginPassword: '************',
        LoginPassword1: '************',
        url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', // https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png
        icon: 'user',
        PaymentPassword: '************',
        PaymentPassword1: '************',
      },
      visible: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      form:this.$form.createForm(this),
      validatorRulesSet:{
        passwd:{
          rules: [{
            required: true, pattern: /^\d{6}$/ ,message: '请输入6位数字的新密码!',
          }, {
            validator: this.validateToNextPassword,
          }],
        },
        passwdOk:{
          rules: [{
            required: true,pattern: /^\d{6}$/ , message: '请确认新密码!',
          }, {
            validator: this.compareToFirstPassword,
          }],
        },
        captcha:{
          rules: [{
            required: true, pattern: /^.{6}$/ , message: '请输入六位短信验证码!',
          }],
        },
      },
      autoCom: 'off',
      inputType:'text',
      isShow: false,
      codeText: '发送验证码',
      disabledCodeBtn: false,
    }
  },
  created() {
    this.getUserInfo();
  },
  methods:{
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !=''){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
    handleConfirmBlur  (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    //发送验证码
    send(){
      getSendSmsCaptcha().then(res => {
        if (res.success) {
          this.$message.success('短信发送成功！')
        }else{
          this.$message.warning(res.message)
        }
      })
      this.countDown(60);
    },
    // 倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "重新发送验证码";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "重新发送验证码(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    //保存
    addCategory(){
      //请求接口
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let params = values;
          getSetPaypwd(params).then(res => {
            if (res.success) {
              this.$message.success('密码修改成功！')
              this.visible = true;
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })
    },
    //
    updateDataEvent(type){
      //type  1 登录手机号  2 登录密码  3 头像设置 4 支付密码
      if (type == 1){
        this.$router.push({
          path: '/setting/modifyLoginMobile'
        })
      }else if(type == 2){
        this.$router.push({
          path: '/setting/changePassword'
        })
      }else if(type == 4){
        this.$router.push({
          path: '/infoManagement/passwordPage'
        })
      }
    },
    getUserInfo(){
      LoginUserInfo().then(res => {
        if (res.success) {
          let data = res.result;
          if (data){
            this.formData.phone = numberFilter(data.phone,'mobileCard');
          }
        }else{
          this.$message.warning(res.message)
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>

/deep/.ant-form-item-children{
  display: flex;
}

</style>
